<template>
    <wxc-tab-page ref="wxc-tab-page"
                  :tab-titles="tabTitles"
                  :tab-styles="tabStyles"
                  title-type="icon"
                  :tab-page-height=" contentHeight"
                  @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
        <div class="tab-page-wrapper" :style="{height:contentHeight + 'px'}"
             v-for="(temp, index) in tabTitles">
            <scroller
                  class="left-list"
                  :style="{ height: ( contentHeight - tabStyles.height) + 'px' }">
                <div v-for="(item,key) in tabList[index]"
                      class="cell left-list"
                      :key="key">
                    <div :class="[ 'content', key ===keyList[index] ? 'left-active':'' ]" @click="leftRankClick(item._id, key)">
                        <text :class="['left-text', key ===keyList[index] ? 'left-text-active':'' ]">{{item.shortTitle}}</text>
                    </div>
                </div>
            </scroller>
            <book-list class="right-list" :isGoTop="isGoTopList[index]"
                       :listHeight="contentHeight - tabStyles.height"
                       :bookList="bookList"
                       @onLoading="onloading">
                <div></div>
            </book-list>
        </div>
    </wxc-tab-page>
</template>

<style scoped>

    .border-cell {
        background-color: #f2f3f4;
        /*width: 750px;*/
        height: 24px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }

    .content {
        height: 140px;
        border-bottom-width: 1px;
        border-bottom-color: rgba(0,0,0,.05);
        align-items: center;
        justify-content: center;
    }

    .tab-page-wrapper {
        flex-direction: row;
        width: 750px;
    }

    .row {
        flex-direction: row;
    }

    .left-list {
        width: 200px;
    }

    .right-list {
        width: 550px;
    }
    .left-active{
        background-color: rgba(0,0,0, .05);
    }
    .left-text{
        padding-left: 30px;
    }
    .left-text-active{
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #d81e06;
    }
</style>
<script>
    const dom = weex.requireModule('dom');
    import {WxcTabPage} from 'weex-ui';
    import Config from './RankConfig'
    import {rank_info, rank_book} from '../../store/actions'
    import BookList from '../search/BookList';

    export default {
        components: {WxcTabPage, BookList},
        props: {
            contentHeight: {
                type: Number,
                default: 1334
            }
        },
        data: () => ({
            tabTitles: Config.tabIconFontTitles,
            tabStyles: Config.tabIconFontStyles,
            tabList: [],     // 左边的内容
            rankInfo: {},
             //右边的内容,
            maleBookList:[], //男生书的内容,
            tempMaleBookList:[], //男生书的全部内容,

            femaleBookList:[],  //女生书的内容,
            tempFemaleBookList:[],  //女生书的全部内容,

            publishBookList:[], //出版书的内容,
            tempPublishBookList:[], //出版书的全部内容,

            color: ['red', 'blue', 'green'],
            keyList:[],
            currentPage:0,
            total: 0,
            isGoTopList: [],
            length:10,
        }),
        created() {
            // this. contentHeight = this.contentHeight;
            rank_info({
                callback: data => {
                    this.rankInfo = data;
                    let temp = this.rankInfo['male'];
                    if (temp) {
                        this.init(temp);
                    }
                    temp = this.rankInfo['female'];
                    if (temp) {
                        this.init(temp);
                    }
                    temp = this.rankInfo['epub'];
                    if (temp) {
                        this.init(temp);
                    }
                    let item;
                    console.log('init');
                    let tempPage = this.currentPage;
                    for( let i = this.tabList.length-1; i > -1 ;i--){
                        item = this.tabList[i];
                        let rankId = item[this.keyList[i]]._id;
                        console.log(item[0]._id, i );
                        this.getRankBook(rankId, i);
                    }
                },
            })
        },
        mounted(){
        },
        computed:{
            bookList(){
              return this.currentPage + 1 && this.getContentBook()
            },
        },
        methods: {
            getContentBook(){
                switch (this.currentPage) {
                    case 0:
                        return this.maleBookList;
                    case 1:
                        return this.femaleBookList;
                    case 2:
                        return this.publishBookList;
                }
                return [];
            },
            setContentBook(list, index){
                index = index === undefined ? this.currentPage: index;
                switch (index) {
                    case 0:
                        this.tempMaleBookList = list;
                        this.maleBookList = this.tempMaleBookList.splice(0,this.length);
                        break;
                    case 1:
                        this.tempFemaleBookList = list;
                        this.femaleBookList = this.tempFemaleBookList.splice(0,this.length);
                        break;
                    case 2:
                        this.tempPublishBookList = list;
                        this.publishBookList = this.tempPublishBookList.splice(0,this.length);
                        break;
                }
            },
            get(){
                let temp =this.tabList
                return "1234234"
            },
            init(tabTemp){
                this.tabList.push(tabTemp);
                this.keyList.push(0);
                this.isGoTopList.push(true);
            },
            getRankBook(rankId, index){
                this.$emit('changLoading',{isShow: true});
                rank_book({
                    params:{
                        rankId: rankId,
                    },
                    callback: (data) => {
                        let books = data.ranking && data.ranking.books || [];
                        if (books.length > 0) {
                            this.setContentBook(books, index)
                        }
                        this.total = data.total || 0;
                    },
                    after: () =>{
                        this.$emit('changLoading',{isShow: false});
                    }
                })
            },
            wxcTabPageCurrentTabSelected(e) {
                const self = this;
                this.currentPage = e.page;
                // let key = this.keyList[this.currentPage];
                // let rankId = this.tabList[this.currentPage][key]._id;
                // console.log(rankId, this.currentPage ,key);
                // this.getRankBook(rankId, this.currentPage);
            },
            leftRankClick(rankId,  key) {
                this.$set(this.keyList, this.currentPage, key);
                this.getRankBook(rankId,this.currentPage);
                let temp = this.isGoTopList[this.currentPage];
                this.$set(this.isGoTopList, this.currentPage, !temp);
            },
            onloading(){
                let tempBookList = [];
                let realBookList = [];
                let page = this.currentPage;
                switch (this.currentPage){
                    case 0:
                        tempBookList = this.tempMaleBookList.splice(0,this.length); //男生书的全部内容,
                        realBookList = this.maleBookList;
                        break;
                    case 1:
                        tempBookList = this.tempFemaleBookList.splice(0,this.length); //男生书的全部内容,
                        realBookList = this.femaleBookList;
                        break;
                    case 2:
                        tempBookList = this.tempPublishBookList.splice(0,this.length); //男生书的全部内容,
                        realBookList = this.publishBookList;
                        break;
                }
                if(tempBookList.length >0){
                    this.$emit('changLoading',{isShow: true});
                    realBookList.splice(realBookList.length,0,...tempBookList);
                }
                this.$emit('changLoading',{isShow: false});
            },
        }
    };
</script>